<template>
  <transition>
    <div class="bottom-tab-box">
      <div class="footer-btn" v-for="item of btns" :key="item.label" @click="onClick(item.url)">
        <img :src="item.icon" class="icon">
        <div class="text">{{item.label}}</div>
      </div>
      <div class="add-to-cart-btn">加入购物车</div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ProductBottomTab',
  data () {
    return {
      btns: [{
        label: '首页',
        icon: '',
        url: '/'
      }, {
        label: '购物车',
        icon: '',
        url: '/cart'
      }]
    }
  },
  methods: {
    onClick (url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="stylus" scoped>
.v-enter, .v-leave-to
  transform: translateY(2rem)
.v-enter-active, .v-leave-active
  transition: transform .5s
.bottom-tab-box
  z-index: 10
  position: fixed
  bottom: .2rem
  left: .2rem
  right: .2rem
  height: 1.1rem
  border-radius: .2rem
  border: 1px solid #e5e5e5
  background: hsla(0,0%,100%,.96)!important
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12)
  display: flex
  align-items: center
  text-align: center
  .footer-btn
    margin-left: .5rem
    color: rgba(0,0,0,.54)
    .icon
      width: .4rem
      height: .4rem
      margin-bottom: .04rem
    .text
      font-size: .2rem
  .add-to-cart-btn
    width: 2.5rem
    background: #ff6700
    color: #fff
    font-size: .3rem
    line-height: .7rem
    margin-left: 2rem
    border-radius: 1rem
</style>
